<template>
	<view>
		<scroll-view :style="[listStyle]" :scroll-y="true">
			
			<SubCheckbox v-for="(item, index) in items"
			:key="index" 
			:reset="reset"
			:isradio="isradio"
			 :headlabel="item.label" 
			 @changeItem="checkboxClick"
			 :fieldname="item.field"
			:items="item.options"></SubCheckbox>
			
		</scroll-view>
		
		<view class="drop-action">
			<view class="drop-action__cancel">
				<u-button type="default" :plain="true" @click="cancel">取消</u-button>
			</view>
			<view class="drop-action__ok">
				<u-button type="primary" @click="ok">确定</u-button>
			</view>			
			
		 </view>
	</view>
</template>

<script>
	import { addUnit, addStyle, deepMerge } from '@/uni_modules/uview-plus/libs/function/index.js';
    import SubCheckbox from "./sub-checkbox.vue"
	
	export default{
		name:"sub-mut-item",
		components: {SubCheckbox },
		props:{
			items:{
				type: Object,
				default:[],
			},
			width:{
				type: [String, Number] ,
				default: 0,
			},
			height:{
				type: [String, Number] ,
				default: 300,
			},
			headlabel:{
				type:String,
				default: '自定义价格',
			},
			
			isradio :{
				type: [String, Number] ,
				default: 0,
			}
		},
	   emits: ['selectok' ,'changeItem'], 
	   data(){
			return {
				formdata:{
					isok: false, 
				},
				modelvalue:{},
				reset: false,
			}
		},
		computed:{
			listStyle() {
				const style = {};
				if (this.width != 0) style.width = addUnit(this.width)
				if (this.height != 0) style.height = addUnit(this.height-50)
				// 如果没有定义列表高度，则默认使用屏幕高度			 
				return deepMerge(style, addStyle(this.customStyle))
			},
			 
		}, 
		mounted() {
			 
		},
		methods:{
			cancel(){ 
			    this.formdata.isok = false;
				this.reset = !this.reset ;
				this.$emit('selectok',  this.formdata ); 
			},
			ok(){   
				this.formdata.isok = true;				 
				this.$emit('selectok',  this.formdata ); 
			},
			checkboxClick(value){
				this.formdata =  Object.assign(this.formdata, value)
				console.log(this.formdata) 
			},
		}
		
	}
</script>

<style lang="scss">
	.drop-content{
		 
		&__head{
			 
			padding-left: 40rpx;
		}
	 }
	.drop-action{
		display: flex; 
		justify-content: center;
		
		&__cancel{ 
			flex-grow: 1;
		}
		
		&__ok{
			flex-grow: 1;
		}
	}
</style>